<template>
  <div>
    <el-dialog title="新增车辆工单" :visible.sync="open" width="800px" append-to-body>
      <el-form ref="ruleForm" :model="ruleForm" label-position="right" label-width="120px">
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="车架号:" prop="vinNo" :rules="rules.vinNo">
              <el-autocomplete v-model.trim="ruleForm.vinNo" style="width: 100%"
                               :fetch-suggestions="requireQueryVinNo" placeholder="请输入车架号"
                               :trigger-on-focus="false"
                               @select="handleSelectVinNo">
                <template slot-scope="{ item }">
                  <div class="product-item">
                    <div class="name">
                      <span>{{ item.vinNo }}</span>
                    </div>
                  </div>
                </template>
              </el-autocomplete>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="车牌号:" prop="carNo">
              <el-autocomplete v-model.trim="ruleForm.carNo" style="width: 100%"
                               :fetch-suggestions="requireQueryCarNo" placeholder="请输入车牌号"
                               :trigger-on-focus="false"
                               @select="handleSelectCarNo">
                <template slot-scope="{ item }">
                  <div class="product-item">
                    <div class="name">
                      <span>{{ item.carNo }}</span>
                    </div>
                  </div>
                </template>
              </el-autocomplete>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="品牌/车型/车款:">
              <el-input :value="handleInput(ruleForm)" disabled size="mini"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="车辆归属:" prop="ascriptionId" :rules="rules.ascriptionId">
              <el-select filterable v-model="ruleForm.ascriptionId" disabled placeholder="请选择车辆归属"
                         style="width: 100%">
                <el-option v-for="item in companyOriginList" :label="item.deptName" :value="item.deptId"
                           :key="item.deptId"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="车辆产权:" prop="propertyRightId" :rules="rules.propertyRightId">
              <el-select filterable v-model="ruleForm.propertyRightId" disabled placeholder="请选择车辆归属"
                         style="width: 100%">
                <el-option v-for="item in companyOriginList" :label="item.deptName" :value="item.deptId"
                           :key="item.deptId"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="工单类型:" prop="insuranceChannels" :rules="rules.insuranceChannels">
              <el-select filterable v-model="ruleForm.insuranceChannels" clearable placeholder="请选择工单类型"
                         style="width: 100%">
                <el-option label="我司购买" :value="1"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="车辆状态:" prop="businessType" :rules="rules.businessType">
              <el-select filterable v-model="ruleForm.businessType" clearable placeholder="请选择车辆状态"
                         style="width: 100%">
                <el-option v-for="item in dict.type.car_business_type" :label="item.label" :value="item.value"
                           :key="item.value"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="采购禀议号:">
              <el-input v-model="ruleForm.procurementReportNumber" size="mini"/>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="合同禀议号:">
              <el-input v-model="ruleForm.contractReportNumber" size="mini"/>
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>
    <car-table ref="refCarTable"/>
  </div>
</template>

<script>
import {
  submitCarWorkOrder,
  getVinNo,
  getCarNo,
  findCarOrderVoByCarId,
} from "@/api/cwgd/addCarList.js";
import LinkageSelect from "../../../components/linkageSelect.vue";
import {listDept} from "@/api/system/dept";

export default {
  name: "workOrderDialog", //新增
  dicts: ["car_business_type", "car_business_type"],
  components: {
    LinkageSelect,
    carTable: () => import("./carTable.vue"),
  },
  computed: {
    handleInput() {
      return function (val) {
        return val.modelName + val.modelName ? '/' : '' + val.seriesName ? '/' : '' + val.seriesName
      }
    }
  },
  watch: {
    'ruleForm.ascriptionId': {
      handler(val) {
        if (val) {
          this.$refs.ruleForm.clearValidate('ascriptionId')
        }
      },
      deep: true
    },
    'ruleForm.propertyRightId': {
      handler(val) {
        if (val) {
          this.$refs.ruleForm.clearValidate('propertyRightId')
        }
      },
      deep: true
    }
  },
  data() {
    return {
      companyOriginList: [],
      open: false,
      ruleForm: {
        carNo: "",
        vinNo: "",
        orderCode: "",
        customerName: "",
        modelName: "",
        seriesName: "",
        brandName: "",
        ascriptionId: "",
        ascription: '',
        procurementReportNumber: "",
        contractReportNumber: "",
        businessType: "",
        carId: 0,
        workOrderType: 0,
        propertyRightId: '',
        propertyRightName: '',
        insuranceChannels: 1
      },
      message: "请输入车架号",
      rules: {
        vinNo: [{required: true, message: "请输入车架号", trigger: "blur"}],
        carNo: [{required: true, message: "请输入车牌号", trigger: "blur"}],
        ascriptionId: [
          {required: true, message: "请输入车辆归属", trigger: "blur"},
        ],
        propertyRightId: [
          {required: true, message: "请输入车辆产权", trigger: "blur"},
        ],
        businessType: [
          {required: true, message: "请选择车辆状态", trigger: "change"},
        ],
        insuranceChannels: [
          {required: true, message: "请选择工单类型", trigger: "change"},
        ]
      },
    };
  },
  created() {
    this.getCompanyOrigin();
  },
  mounted() {
  },
  methods: {
    getCompanyOrigin() {
      listDept({
        deptType: "2", //组织类型（1部门 2公司）
        regionId: null, //所在城市（省市区id）
      }).then((res) => {
        this.companyOriginList = res.data;
      });
    },

    handleOpen(val) {
      this.ruleForm = {
        carNo: "",
        vinNo: "",
        orderCode: "",
        customerName: "",
        modelName: "",
        seriesName: "",
        brandName: "",
        ascriptionId: "",
        ascription: '',
        procurementReportNumber: "",
        contractReportNumber: "",
        businessType: "",
        carId: 0,
        workOrderType: 0,
        propertyRightId: '',
        propertyRightName: '',
        insuranceChannels: 1
      };
      this.ruleForm.workOrderType = val;
      this.open = true;
    },

    cancel() {
      this.ruleForm = {
        carNo: "",
        vinNo: "",
        orderCode: "",
        customerName: "",
        modelName: "",
        seriesName: "",
        brandName: "",
        ascriptionId: "",
        ascription: '',
        procurementReportNumber: "",
        contractReportNumber: "",
        businessType: "",
        carId: 0,
        workOrderType: 0,
        propertyRightId: '',
        propertyRightName: '',
        insuranceChannels: 1
      };
      this.linkageList = [];
      this.open = false;
    },

    async requireQueryVinNo(queryString, cb) {
      let results = []
      const res = await getVinNo(queryString);
      if (res.code === 200) {
        results = res.data;
      } else {
        results = [];
      }
      if (results.length === 0) {
        this.ruleForm.vinNo = "";
      }
      cb(results);
    },

    handleSelectVinNo(val) {
      if (val) {
        this.ruleForm.carId = val.carId;
        this.ruleForm.carNo = val.carNo;
        this.ruleForm.vinNo = val.vinNo;
        this.ruleForm.modelName = val.modelName;
        this.ruleForm.seriesName = val.seriesName;
        this.ruleForm.brandName = val.brandName;
        this.ruleForm.businessType = val.businessType;
        this.handleDetails(val.carId)
      }
    },


    async requireQueryCarNo(queryString, cb) {
      let results = []
      const res = await getCarNo(queryString);
      if (res.code === 200) {
        results = res.data;
      } else {
        results = [];
      }
      if (results.length === 0) {
        this.ruleForm.carNo = "";
      }
      cb(results);
    },

    handleSelectCarNo(val) {
      if (val) {
        this.ruleForm.carId = val.carId;
        this.ruleForm.carNo = val.carNo;
        this.ruleForm.vinNo = val.vinNo;
        this.ruleForm.modelName = val.modelName;
        this.ruleForm.seriesName = val.seriesName;
        this.ruleForm.brandName = val.brandName;
        this.ruleForm.businessType = val.businessType;
        this.handleDetails(val.carId)
      }
    },

    handleDetails(val) {
      findCarOrderVoByCarId(val).then((res) => {
        if (res.code === 200) {
          const obj = res.data;
          this.ruleForm.propertyRightName = obj?.propertyRightName;
          this.ruleForm.propertyRightId = obj?.propertyRightId;
          this.ruleForm.ascription = obj?.ascription;
          this.ruleForm.ascriptionId = obj?.ascriptionId;
          this.ruleForm.contractReportNumber = obj?.contractReportNumber;
          this.ruleForm.procurementReportNumber = obj?.procurementReportNumber;
        }
      });
    },

    submitForm() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          delete this.ruleForm.aaa;
          submitCarWorkOrder(this.ruleForm).then((res) => {
            if (res.code === 200) {
              this.$emit("change");
              this.$message.success("新增成功");
              this.open = false;
            }
          });
        }
      });
    },
  },
};
</script>

<style scoped lang=""></style>


